<template>
    <div class="carousel">
        <div class="operation-bar">
            <el-button type="primary" @click="handleAdd">新增</el-button>
        </div>
        <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="title" label="标题" />
            <el-table-column prop="imageUrl" label="图片">
                <template #default="scope">
                    <el-image 
                        v-if="scope.row.imageUrl" 
                        :src="scope.row.imageUrl" 
                        style="width: 100px; height: 60px"
                        :preview-src-list="[scope.row.imageUrl]"
                    />
                </template>
            </el-table-column>
            <el-table-column prop="linkUrl" label="跳转链接">
                <template #default="scope">
                    <el-link type="primary" :href="scope.row.linkUrl" target="_blank">
                        {{ scope.row.linkUrl }}
                    </el-link>
                </template>
            </el-table-column>
            <el-table-column prop="sortOrder" label="排序" />
            <el-table-column prop="isEnabled" label="是否显示">
                <template #default="scope">
                    <el-tag :type="scope.row.isEnabled ? 'success' : 'info'">
                        {{ scope.row.isEnabled ? '显示' : '隐藏' }}
                    </el-tag>
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200">
                <template #default="scope">
                    <el-button type="primary" link @click="handleEdit(scope.row)">编辑</el-button>
                    <el-button type="danger" link @click="handleDelete(scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>

        <!-- 新增/编辑对话框 -->
        <el-dialog
            v-model="dialogVisible"
            :title="dialogType === 'add' ? '新增轮播图' : '编辑轮播图'"
            width="50%"
        >
            <el-form :model="form" label-width="100px">
                <el-form-item label="标题">
                    <el-input v-model="form.title" />
                </el-form-item>
                <el-form-item label="图片链接">
                    <el-input v-model="form.imageUrl" />
                </el-form-item>
                <el-form-item label="跳转链接">
                    <el-input v-model="form.linkUrl" />
                </el-form-item>
                <el-form-item label="排序">
                    <el-input-number v-model="form.sortOrder" :min="0" />
                </el-form-item>
                <el-form-item label="是否显示">
                    <el-switch v-model="form.isEnabled" />
                </el-form-item>
            </el-form>
            <template #footer>
                <span class="dialog-footer">
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button type="primary" @click="handleSubmit">确定</el-button>
                </span>
            </template>
        </el-dialog>
    </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { ElMessage, ElMessageBox } from 'element-plus'
import { getCarouselList, deleteCarousel, createCarousel } from '@/api/zhaokao/systemweb'

const tableData = ref([])
const dialogVisible = ref(false)
const dialogType = ref('add')
const form = ref({
    title: '',
    imageUrl: '',
    linkUrl: '',
    sortOrder: 0,
    isEnabled: true
})

// 获取列表数据
const fetchData = async () => {
    try {
        const res = await getCarouselList({
            pageNum: 1,
            pageSize: -1
        })
        if (res.success && res.code === 200) {
            tableData.value = res.data.records
        } else {
            ElMessage.error('获取数据失败')
        }
    } catch (error) {
        ElMessage.error('获取数据失败')
    }
}

// 新增
const handleAdd = () => {
    dialogType.value = 'add'
    form.value = {
        title: '',
        imageUrl: '',
        linkUrl: '',
        sortOrder: 0,
        isEnabled: true
    }
    dialogVisible.value = true
}

// 编辑
const handleEdit = (row) => {
    dialogType.value = 'edit'
    form.value = { ...row }
    dialogVisible.value = true
}

// 删除
const handleDelete = (row) => {
    ElMessageBox.confirm('确定要删除该轮播图吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
    }).then(async () => {
        try {
            await deleteCarousel(row.id)
            ElMessage.success('删除成功')
            fetchData()
        } catch (error) {
            ElMessage.error('删除失败')
        }
    })
}

// 提交表单
const handleSubmit = async () => {
    try {
        await createCarousel(form.value)
        ElMessage.success(dialogType.value === 'add' ? '新增成功' : '编辑成功')
        dialogVisible.value = false
        fetchData()
    } catch (error) {
        ElMessage.error(dialogType.value === 'add' ? '新增失败' : '编辑失败')
    }
}

onMounted(() => {
    fetchData()
})
</script>

<style scoped>
.carousel {
    padding: 20px;
}
.operation-bar {
    margin-bottom: 20px;
}
</style> 